<!DOCTYPE html>
<html>
<head>
    <title>Thermodynamic Cycle p-V Diagram</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="thermoCanvas" width="500" height="520"></canvas>
    <script>
        const canvas = document.getElementById('thermoCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw an arrow on a line segment
        function drawArrow(ctx, x1, y1, x2, y2, arrowPlacement = 0.5) {
            // Draw the line segment itself
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();

            // Calculate arrow position and angle
            const midX = x1 + (x2 - x1) * arrowPlacement;
            const midY = y1 + (y2 - y1) * arrowPlacement;
            const angle = Math.atan2(y2 - y1, x2 - x1);
            const arrowLength = 10;
            const arrowAngle = Math.PI / 6; // 30 degrees

            // Draw the arrowhead
            ctx.beginPath();
            ctx.moveTo(midX, midY);
            ctx.lineTo(midX - arrowLength * Math.cos(angle - arrowAngle), midY - arrowLength * Math.sin(angle - arrowAngle));
            ctx.moveTo(midX, midY);
            ctx.lineTo(midX - arrowLength * Math.cos(angle + arrowAngle), midY - arrowLength * Math.sin(angle + arrowAngle));
            ctx.stroke();
        }

        // --- Main Drawing ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = '20px serif';

        // Coordinates
        const origin = { x: 60, y: 450 };
        const pAxisEnd = { x: origin.x, y: 30 };
        const vAxisEnd = { x: 470, y: origin.y };

        const V1_x = 160;
        const V2_x = 380;

        const A1 = { x: V1_x, y: 180 };
        const B1 = { x: V2_x, y: 80 };
        const C1 = { x: V2_x, y: 180 };

        const A2 = { x: V1_x, y: 280 };
        const B2 = { x: V2_x, y: 210 };
        const C2 = { x: V2_x, y: 280 };

        // 1. Draw Axes
        // p-axis
        drawArrow(ctx, origin.x, origin.y, pAxisEnd.x, pAxisEnd.y, 1);
        ctx.fillText('p', pAxisEnd.x - 25, pAxisEnd.y + 10);
        
        // V-axis
        drawArrow(ctx, origin.x, origin.y, vAxisEnd.x, vAxisEnd.y, 1);
        ctx.fillText('V', vAxisEnd.x + 5, vAxisEnd.y + 10);

        // Origin label
        ctx.fillText('O', origin.x - 25, origin.y + 20);

        // 2. Draw Dashed Helper Lines
        ctx.save();
        ctx.setLineDash([5, 5]);
        ctx.lineWidth = 1;

        // Vertical lines for V1 and V2
        ctx.beginPath();
        ctx.moveTo(A1.x, A1.y);
        ctx.lineTo(A1.x, origin.y);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(B1.x, B1.y);
        ctx.lineTo(B1.x, origin.y);
        ctx.stroke();

        // Lines from origin
        ctx.beginPath();
        ctx.moveTo(origin.x, origin.y);
        ctx.lineTo(A1.x, A1.y);
        ctx.stroke();
        
        ctx.beginPath();
        ctx.moveTo(origin.x, origin.y);
        ctx.lineTo(A2.x, A2.y);
        ctx.stroke();

        ctx.restore();

        // 3. Draw Cycles
        ctx.lineWidth = 2;

        // Cycle 1: A1 -> B1 -> C1 -> A1
        drawArrow(ctx, A1.x, A1.y, B1.x, B1.y);
        drawArrow(ctx, B1.x, B1.y, C1.x, C1.y);
        drawArrow(ctx, C1.x, C1.y, A1.x, A1.y);

        // Cycle 2: A2 -> B2 -> C2 -> A2
        drawArrow(ctx, A2.x, A2.y, B2.x, B2.y);
        drawArrow(ctx, B2.x, B2.y, C2.x, C2.y);
        drawArrow(ctx, C2.x, C2.y, A2.x, A2.y);

        // 4. Draw Labels for points and axes
        ctx.font = 'italic 22px serif';

        // Point labels with subscripts
        function drawSubscript(label, sub, x, y) {
            ctx.font = 'italic 22px serif';
            ctx.fillText(label, x, y);
            ctx.font = 'italic 16px serif';
            ctx.fillText(sub, x + 12, y + 6);
        }
        
        drawSubscript('A', '1', A1.x - 30, A1.y + 5);
        drawSubscript('B', '1', B1.x + 5, B1.y - 5);
        drawSubscript('C', '1', C1.x + 5, C1.y + 20);
        
        drawSubscript('A', '2', A2.x - 30, A2.y + 5);
        drawSubscript('B', '2', B2.x + 5, B2.y - 5);
        drawSubscript('C', '2', C2.x + 5, C2.y + 20);
        
        // V-axis labels
        ctx.font = 'italic 20px serif';
        drawSubscript('V', '1', V1_x - 10, origin.y + 25);
        drawSubscript('V', '2', V2_x - 10, origin.y + 25);
        
        // 5. Draw Caption
        ctx.font = '22px sans-serif';
        ctx.fillText('热图 2.17.1', canvas.width / 2 - 60, canvas.height - 10);

    </script>
</body>
</html>